<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>维修工单 - 待派单</title>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
		<style>
			.status-bar {
				height: 44px;
				background-color: #000;
				color: white;
				display: flex;
				align-items: center;
				padding: 0 15px;
			}

			.header-section {
				padding: 15px;
				background: #fff;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			}

			.tab-nav {
				display: flex;
				overflow-x: auto;
				padding: 0 15px 10px;
			}

			.tab-item {
				margin-right: 15px;
				white-space: nowrap;
				position: relative;
			}

			.red-dot {
				position: absolute;
				top: -2px;
				right: -2px;
				width: 8px;
				height: 8px;
				background: #ff4444;
				border-radius: 50%;
			}

			.workorder-card {
				margin: 15px 0;
				padding: 15px;
				border: 1px solid #e9ecef;
				border-radius: 8px;
				position: relative;
			}

			.status-tag {
				padding: 4px 8px;
				border-radius: 4px;
				background: #5cb85c;
				color: white;
				position: absolute;
				right: 15px;
				top: 15px;
			}

			.create-btn {
				position: absolute;
				right: 15px;
				bottom: 15px;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.create-btn i {
				font-size: 1.5rem;
				color: #007bff;
			}

			.bottom-nav {
				position: fixed;
				bottom: 0;
				width: 100%;
				background: #fff;
				border-top: 1px solid #e9ecef;
				padding: 10px 0;
			}
		</style>
	</head>
	<body>


		<div class="container-fluid p-0">
			<!-- 标题栏 -->
			<div class="header-section d-flex justify-content-center">
				<h5 class="mb-0">维修工单</h5>
			</div>

			<!-- 标签导航 -->
			<div class="tab-nav">
				<div class="tab-item position-relative">
					<span>待派单</span>
					<span class="red-dot"></span>
				</div>
				<div class="tab-item position-relative">
					<span>处理中</span>
					<span class="red-dot"></span>
				</div>
				<div class="tab-item position-relative">
					<span>待支付</span>
					<span class="red-dot"></span>
				</div>
				<div class="tab-item">施工中</div>
				<div class="tab-item">已完成</div>
				<div class="tab-item">已取消</div>
			</div>

			<!-- 工单列表 -->
			<div class="list-group">
				<div class="workorder-card">
					<span class="status-tag">待派单</span>
					<p class="my-1">工单编号：AA2222222222
						<i class="bi bi-share ms-2"></i>
					</p>
					<p class="my-1">维修日期：<span class="text-warning">2023-3-25</span></p>
					<p class="my-1">故障位置：海鲜区D6-34铺</p>
					<p class="my-1">故障描述：门锁坏了无法关上</p>
					<button class="btn btn-outline-secondary btn-sm float-end">取消工单</button>
				</div>
				<div class="workorder-card">
					<span class="status-tag">待派单</span>
					<p class="my-1">工单编号：AA2222222222
						<i class="bi bi-share ms-2"></i>
					</p>
					<p class="my-1">维修日期：<span class="text-warning">2023-3-25</span></p>
					<p class="my-1">故障位置：公共区域-江边垃圾压缩站旁空地1号</p>
					<p class="my-1">故障描述：门锁坏了无法关上</p>
					<button class="btn btn-outline-secondary btn-sm float-end">取消工单</button>
				</div>
				<div class="workorder-card">
					<span class="status-tag">待派单</span>
					<p class="my-1">工单编号：AA2222222222
						<i class="bi bi-share ms-2"></i>
					</p>
					<p class="my-1">维修日期：<span class="text-warning">2023-3-25</span></p>
					<p class="my-1">故障位置：海鲜区D6-34铺</p>
					<p class="my-1">故障描述：门锁坏了无法关上</p>
					<button class="btn btn-outline-secondary btn-sm float-end">取消工单</button>
				</div>
				<div class="workorder-card position-relative">
					<span class="status-tag">待派单</span>
					<p class="my-1">工单编号：AA2222222222
						<i class="bi bi-share ms-2"></i>
					</p>
					<p class="my-1">维修日期：<span class="text-warning">2023-3-25</span></p>
					<p class="my-1">故障位置：海鲜区D6-34铺</p>
					<p class="my-1">故障描述：门锁坏了无法关上</p>
					<button class="btn btn-outline-secondary btn-sm float-end">取消工单</button>
					<div class="create-btn">
						<i class="bi bi-plus-lg"></i>
						<span class="text-primary small">创建工单</span>
					</div>
				</div>
			</div>

			<!-- 底部导航 -->
			<nav class="bottom-nav navbar navbar-light bg-light">
				<div class="container-fluid justify-content-around">
					<a class="navbar-brand" href="#">
						<i class="bi bi-house"></i><br>首页
					</a>
					<a class="navbar-brand" href="#">
						<i class="bi bi-wrench"></i><br>报障维修
					</a>
					<a class="navbar-brand" href="#">
						<i class="bi bi-person"></i><br>我的
					</a>
				</div>
			</nav>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
	</body>
</html>